<template>
  <div class="view-resource">
    <div class="title"><span></span>资源信息</div>
    <div class="view-list" :style="getStyle(index)" v-for="(item, index) in listKey" :key="index">
      {{item.label}}: {{resourceForm[item.name]}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'viewResource',
  props: {
    resourceForm: {
      type: Object,
      default: function () {
        return {
          sort: -1,
          name: '',
          code: '',
          url: '',
          add: 0,
          des: ''
        }
      }
    }
  },
  data () {
    return {
      listKey: [
        {
          name: 'sort',
          label: '资源编号'
        },
        {
          name: 'name',
          label: '资源名称'
        },
        {
          name: 'code',
          label: '资源组'
        },
        {
          name: 'url',
          label: '资源路径'
        },
        {
          name: 'add',
          label: 'add'
        },
        {
          name: 'des',
          label: '资源描述'
        }
      ]
    }
  },
  methods: {
    getStyle (index) {
      if (index % 2 === 0) {
        return `background: #f9f9f9`
      }
      return `background: #fff`
    }
  }
}
</script>

<style lang="scss" scoped>
  .view-resource {
    .title {
      color: #3C81FF;
      font-size: 14px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 20px;
      span {
        background-color: #3C81FF;
        width: 2px;
        height: 14px;
        margin-right: 8px;
      }
    }
    .view-list {
      height: 39px;
      line-height: 39px;
      color: #444;
    }
  }
</style>
